<template>
	<view class="container">
		<u-navbar :is-back="false" :border-bottom="flase" title="账号绑定" title-color="#fff" :title-size="40"
			backIconColor="#fff"></u-navbar>
		<view class="login">
			<view class="uni-common-mt">
				<view class="uni-form-item">
					<view class="login_label">账号绑定</view>
				</view>
				<view class="uni-form-item">
					<view>
						<input class="input" v-model="user.mobile" placeholder="请输入账号"
							placeholder-style="color:#7e7e7e" />
					</view>
				</view>
				<view class="uni-form-item">
					<view class="input">
						<u-input v-model="user.password" :type="type" :password-icon="passwordIcon" placeholder="请输入密码"
							placeholder-style="color:#7e7e7e" />
					</view>
				</view>
				<view class="verify">
					<input type="text" placeholder="请输入验证码" v-model="user.captcha" placeholder-style="color:#7e7e7e" />
					<image :src="codeSrc" @click="yanzhengma()" style="width: 280rpx;height: 80rpx;" />
				</view><!-- 验证码 -->
				<view class="uni-form-item">
					<view>
						<u-button type="primary" plain=plain @click="user_login()" class="but">绑定账号</u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// woc: true,
				// isAuthorization: true,
				// value: '',
				user: {
					mobile: '',
					password: '',
					openid: '',
					captcha: '' //用户输入的验证码
				},
				type: 'password',
				passwordIcon: true,
				border: true,
				codeSrc: ''
			}
		},
		methods: {
			user_login() { //点击登录
				let data = this.user
				this.$http(this.$api.bind, data).then(res => {
					if (res.code == 0) { //新用户
						uni.showToast({
							title: res.msg,
							mask: true,
							success() {
								uni.removeStorageSync('isNew')
								setTimeout(() => {
									uni.reLaunch({
										url: '/pages/index/index'
									})
								}, 1500)
							}
						})
					} else if (res.msg.indexOf('绑定') > -1 && res.code == -1) { //老用户
						// indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置。下标数
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true
						})
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}, 1000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'error'
						})
						this.yanzhengma()
					}
				})
			},
			yanzhengma() { //点击之后 换图片
				this.codeSrc = ''
				this.$http(this.$api.verify).then(res => {
					this.codeSrc = res.data + Math.random()
					if (res.code == 1) {
						uni.showToast({
							title: '验证码!',
							icon: "error"
						})
					}
				})
			}
		},
		onLoad() {
			// 拿到进入小程序获得的openid  （先得到code，把code给接口，接口返回openid）
			this.user.openid = uni.getStorageSync('openid')
			// 一开始加载一次验证码
			this.$http(this.$api.verify).then(res => {
				this.codeSrc = res.data
				if (res.code == 1) {
					uni.showToast({
						title: res.msg,
						icon: "error"
					})
				}
			})
		},
	}
</script>

<style scoped>
	* {
		padding: 0;
		margin: 0;
	}

	.container {
		background: linear-gradient(to right, #A471FC, #77B4F7);
		width: 100vw;
		height: 100vh;
		color: #fff;
	}

	.login {
		padding: 20rpx 40rpx;
		margin: 200rpx 20rpx;
		text-align: center;
	}

	.login_label {
		color: #fff;
		margin: 0 auto;
		font-size: 30px;
	}

	.input {
		height: 80rpx;
		text-align: left;
		padding-left: 50rpx;
		border-radius: 50rpx;
		font-size: 30rpx;
		border: 1px solid #CCCCCC;
		color: #000;
		padding-right: 10px;
		background-color: #eeeeee;
	}

	.uni-form-item {
		margin: 30rpx 0;
	}

	/* 	.but {
		font-size: 30rpx;
		color: #25b06d;
		border: 1px solid #25b06d;
		border-radius: 200rpx;
		background-color: #daf2e2;
	} */

	.verify {
		display: flex;
		justify-content: right;
		border: 1px solid #CCCCCC;
		border-radius: 50rpx;
		background-color: #eeeeee;
		height: 80rpx;
		overflow: hidden;
	}

	.verify input {
		width: 75%;
		height: 60rpx;
		padding-left: 20rpx;
		line-height: 60rpx;
		text-align: left;
		margin: 3px 0 0 15px;
		background-color: #eeeeee;
		color: #000;
	}

	.verify image {
		border-radius: 10px;
		height: 55rpx;
	}
</style>
